<template>
  <div class="qh-vip">
    <div class="left">
      <div class="vip-header">
        <span class="viplist">vip榜单</span>
        <router-link
          v-for="item in subdatas"
          :key="item.id"
          v-text="item.text"
          :to="item.path"
          :class="{ cls: item.path === route_path }"
        />
      </div>
      <router-view></router-view>
    </div>
    <div class="right"></div>
  </div>
</template>

<script>
import { routes } from "@/router";

export default {
  computed: {
    subdatas() {
      return routes[1].children;
    },
    route_path() {
      return this.$route.path;
    },
  },
};
</script>

<style>
.qh-vip {
  width: 1200px;
  margin: 0 auto;
  display: flex;
}
.left {
  flex: 5;
  margin-right: 30 px;
  background-color: #fff;
}
.vip-header {
  border-bottom: 2px solid rgb(235, 235, 235);
}
.vip-header a {
  display: inline-block;
  text-decoration: none;
  margin-right: 20px;
  /* line-height: 60px; */
  color: black;
}
.right {
  flex: 2;
}
.viplist {
  display: inline-block;
  margin: 20px 20px;

  font-size: 24px;
  font-weight: 600;
  padding-left: 30px;
  border-left: 2px solid orange;
}
a.cls {
  color: rgb(206, 153, 79);
  border-bottom: 2px solid rgb(206, 153, 79);
  font-weight: 600;
}
</style>
